<template>
  <div class="bg-white rounded-xl shadow-custom p-6 border-l-4 transition-all duration-300 hover:scale-[1.02]" :class="`border-${color}`">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm font-medium text-gray-500">{{ title }}</p>
        <h3 class="text-3xl font-bold mt-1 text-gray-800">{{ value }}</h3>
      </div>
      <div :class="`bg-${color}/10 p-3 rounded-lg`">
        <i :class="`fa ${icon} text-${color} text-xl`"></i>
      </div>
    </div>
    <div class="mt-4 flex items-center">
      <span :class="`text-${trend === 'up' ? 'success' : 'danger'} text-sm font-medium`">
        <i :class="`fa fa-arrow-${trend} mr-1`"></i>{{ change }}%
      </span>
      <span class="text-xs text-gray-500 ml-2">较上月</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StatCard',
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: [Number, String],
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: 'primary'
    },
    change: {
      type: Number,
      default: 0
    },
    trend: {
      type: String,
      default: 'up',
      validator: value => ['up', 'down'].includes(value)
    }
  }
}
</script> 